<template>
	<view>
		<view class="background"></view>
		<view class="tag">
			<view @click="changeCurrent" :data-index="index" v-for="(item,index) in tagList" :key="index">
				<text :class="current == index?'border-bottom':''">{{ item }}</text>
			</view>
		</view>
	<!-- 维修方式 -->
		<view class="mode">
			<text>维修方式：</text>
			<view class="select" @click="openOptions">
				<view>
					<input disabled type="text" :value="option"/>
				</view>
				<view :class="isOptions?'arrow1':'arrow'"></view>
			</view>
			<view class="options" v-if="isOptions">
				<view @click="getOption(item)" v-for="(item,index) in options" :key="index">
					{{item.text}}
				</view>
			</view>
			
		</view>
	<!-- 维修列表 -->
		<swiper :current="current" @change="getCurrent">
			<swiper-item >
				<view class="orderList">
					<navigator url="/packagesMy/maintenanceRecord/maintenanceRecord" class="orderItem" v-for="(item,index) in orderList" :key="index">
						<view class="">
							维修单号：<text>{{ item.id }}</text>
						</view>
						<view class="">
							维修方式：<text>{{ item.mode }}</text>
						</view>
						<view class="">
							预约日期：<text>{{ item.date }}</text>
						</view>
					</navigator>
				</view>
			</swiper-item>
			<swiper-item>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value:0,
				tagList:['进行中','已完成'],
				option: '全部',
				isOptions: false,
				options: [
					{
						value:0,
						text:'全部'
					},
					{
						value:1,
						text:'到店维修'
					},
					{
						value:2,
						text:'上门取车'
					}
				],
				orderList:[
					{
						id: 35535,
						mode:'到店维修',
						date:'2022/11/10 12:00'
					},
					{
						id: 3525,
						mode:'上门维修',
						date:'2022/11/11 9:00'
					},
					{
						id: 35535,
						mode:'到店维修',
						date:'2022/11/09 12:00'
					},
					{
						id: 35535,
						mode:'到店维修',
						date:'2022/11/10 12:00'
					},
				],
				current: 0,
			}
		},
		methods:{
		// 打开select选择框
			openOptions(){
				this.isOptions = !this.isOptions
			},
		// 获取option
			getOption(item){
				this.option = item.text
				this.value = item.value
				this.isOptions = false
			},
		// 获取current
			getCurrent(e){
				this.current = e.detail.current
			},
			changeCurrent(e){		
				this.current = e.currentTarget.dataset.index
			},
		},
	}
	
</script>

<style>
	page{
		padding: 0 20rpx;
	}
	.background {
		width: 750rpx;
		height: 280rpx;
		margin-left: -20rpx;
		background-color: #2979ff;
	}
	.tag{
		width: 710rpx;
		display: flex;
		color: white;
		position: absolute;
		top: 0;
		justify-content: center;
	}
	.tag > view {
		font-size: 34rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.border-bottom{
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid white;
	}
// 维修方式框样式
	.mode {
		background-color: white;
		border-radius: 20rpx;
		position: absolute;
		padding: 30rpx 30rpx;
		width: 650rpx;
		top: 90rpx;
		display: flex;
	}
	.mode > text {
		height: 50rpx;
		line-height: 50rpx;
	}
	.select{
		background-color: #2979ff;
		border-radius: 10rpx;
		padding: 10rpx 10rpx;
		position: relative;
		width: 150rpx;
	}
	.select input{
		color: white;
		font-size: 24rpx;
		width: 110rpx;
		text-align: center;
	}
	.select > .arrow {
		border-right: 2rpx solid white;
		border-bottom: 2rpx solid white;
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-76%) rotate(45deg);
		right: 20rpx;
	}
	.select > .arrow1 {
		border-right: 2rpx solid white;
		border-bottom: 2rpx solid white;
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-26%) rotate(-135deg);
		right: 20rpx;
	}
	.options{
		position: absolute;
		z-index: 3;
		top: 104rpx;
		left: 174rpx;
		background-color: white;
		width: 180rpx;
		padding: 10rpx 10rpx;
		box-shadow: 2rpx 2rpx 10rpx 2rpx rgba(220,220,220,0.8);
		border-radius: 10rpx;
	}
	.options > view{
		text-align: center;
	}
// 维修列表
	swiper{
		position: absolute;
		top: 204rpx;
		height: 950rpx ;
		width: 710rpx;
	}
	.orderItem{
		width: 670rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
	}
	.orderItem > view:nth-child(2){
		margin: 10rpx 0;
	}
	.orderItem text{
		color: #6a6a6a;
	}
</style>